<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的订单</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="format-detection" content="telephone=no, email=no"/>

    <meta name="keywords" content="商城">
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- 手机百度搜索打开网页时,不需要为网页进行转码-->
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <link rel="icon" type="image/png" href="$!webPath/resources/app/mcjd/images/logo.png">
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" type="text/css" href="$!webPath/resources/app/mcjd/css/common_jmc.css"/>
    <link rel="stylesheet" type="text/css" href="$!webPath/resources/app/mcjd/css/jmc_icon.css"/>
    <link rel="stylesheet" type="text/css" href="$!webPath/resources/app/mcjd/css/jmc_odmy.css"/>

    <script type="text/javascript" src="$!webPath/resources/app/mcjd/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="$!webPath/resources/app/mcjd/js/template.js"></script>
    <script type="text/javascript">
        window._URI_ = {
            IP0: '$!mallBaseurl', // 本地
            IP1: 'http://testmall.yijiahn.com/mall' // 开发环境
        }
        window._URL_ = {
            orderList: _URI_.IP0 + '/app/order/list.json', // 订单列表
            orderDetail: _URI_.IP0 + '/app/mcjd/orderDetail.htm', // 订单详情
            orderDelete: _URI_.IP0 + '/app/order/delete.json', // 删除订单
            orderReceived: _URI_.IP0 + '/app/order/received.json' // 确认收货
        };
    </script>
</head>
<body style="background:#f2f2f2;">
    
    <div id="bxTopbar">
        <div class="bx_topbar">
            <div class="h_44"></div>
            <div class="wp_topbar">
                <div class="it_btn it_back_btn" onclick="javascript:history.back(-1);"><i class="icon ico_1"></i></div>
                <a class="it_btn it_classify_btn" href="javascript:;" style="visibility:hidden;"><i class="icon ico_2"></i></a>
                <div class="it_toptt">我的订单</div>
            </div>
        </div>
    </div>

    <div class="bx-odlist">
        <div class="wp-odlist">
            <ul class="ul-odlist" id="resOdList"></ul>
        </div>
        <div id="resNoData"><div class="no_loaddata"></div></div>
    </div>

    <!-- 客服 -->
    <style type="text/css" media="screen">
      .overlay_tel_bg{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.5);z-index:20000;}
      .overlay_tel_bd{position:fixed;z-index:20001;left:50%;top:25%;width:250px;margin-left:-125px;background:#fff;-webkit-border-radius:6px;border-radius:6px;overflow:hidden;}
      .overlay_tel_bd .it-title{ width:100%;height:40px;line-height:40px;border-bottom:1px solid #e5e5e5;color:#505050;font-size:15px;text-align:center;position:relative;}
      .overlay_tel_bd .it-close{width:40px;height:40px;position:absolute;z-index:22222;top:0;right:0;}
      .overlay_tel_bd .it-close:before{content:'';position:absolute;top:9px;right:9px;width:22px;height:22px;background:url($!webPath/resources/app/mcjd/images/phole__1.png) center center no-repeat;background-size:100% 100%;}
      .overlay_tel_bd .it-img{width:88px;height:88px;margin:25px auto;}
      .overlay_tel_bd .it-teln{width:100%;border-top:1px solid #e5e5e5;}
      .overlay_tel_bd .it-teln{color:#505050;font-size:16px;text-align:center;padding:30px 0;}
      .overlay_tel_bd .it-teln:before{content:'';display:inline-block;width:16px;height:16px;margin-right:10px;background:url($!webPath/resources/app/mcjd/images/phole__2.png) center center no-repeat;background-size:100% 100%;vertical-align:-2px;}
      .overlay_tel_bd .btn-teln{width:100%;height:40px;line-height:40px;color:#fff;font-size:15px;background:#a1e561;}
      .overlay_tel_bd .btn-teln a{display:block;text-align:center;color:#fff;}
    </style>
    <div id="overlay_tel_bx" style="display:none;">
      <div class="overlay_tel_bg"></div>
      <div class="overlay_tel_bd">
          <div class="it-title"><span>客服热线</span>
              <div class="it-close"></div>
          </div>
          <div class="it-img"><img src="$!webPath/resources/app/mcjd/images/phole__3.png"></div>
          <div class="it-teln"><span class="it_tel">18637363373</span> </div>
          <div class="btn-teln"><a href="tel:18637363373">呼叫</a></div>
      </div>
    </div>

    <!-- 模板 -->
    <script type="text/html" id="tmplOdList">
        {{each list as item ind}}
        <li id="{{'order_'+item.orderId}}"it_rderId="{{item.orderId}}" it_rderNo="{{item.rderNo}}">
            <div class="it_store clearfix">
                {{if '10' == item.orderStatus}}
                <div class="it_time">剩余支付时间：{{item.diffTimeStr}}</div>
                {{else}}
                <div class="it_sname">{{item.storeName}}</div>
                {{/if}}
                <div class="it_status">{{getStatusTxt(item.orderStatus, item.isShowReturnRequest)}}</div>
            </div>
			<div class="orderDetail" it_rderId="{{item.orderId}}">
            {{each item.goods as item2 ind}}
            <div class="it_info clearfix">
                <div class="it_img"><img ig_crop='max' src="{{item2.picMap.picUrl}}" /></div>
                <div class="it_des">
                    <div class="it_name">{{item2.goodsName}}</div>
                    <div class="it_num"><b>{{item2.goodsPriceShow}}</b> <i>x{{item2.goodsNum}}</i></div>
                </div>
            </div>
            {{/each}}
			</div>
            <div class="it_price">共计{{item.goods.length}}件商品 合计：{{item.totalPriceShow}}元
                {{if item.transfee && '0' != item.transfee && '' != item.transfee}}
                ( 运费¥{{item.transfee}} )
                {{else}}
                ( 包邮 )
                {{/if}}
            </div> 
            <div class="it_btns clearfix {{'s_btn_'+item.orderStatus}}" it_phone="{{item.storeTelephone}}" it_orderId="{{item.orderId}}" it_viewExpressUrl="{{item.viewExpressUrl}}">
                <button class="btn_unbox">晒单评价</button>
                <button class="btn_del">删除订单</button>
                <button class="btn_pay">立即支付</button>
                <button class="btn_take">确认收货</button>
                <button class="btn_log">查看物流</button>
                <button class="btn_buyer">联系买家</button>
            </div>
        </li>
        {{/each}}
    </script>
    <script type="text/html" id="tmplNoData">
        {{if getArrNum(list) <= 0 && '1' == pageNo}}
        <div class="no_data_pg">
            <img src="$!webPath/resources/app/mcjd/images/ico9.png" width="41"><p>没有订单信息</p>
        </div>
        {{else if getArrNum(list) < pageSize}}
        <div class="no_moredata">
            <img src="$!webPath/resources/app/mcjd/images/ico9.png" width="41" /><p>别拉啦 到底啦</p>
        </div>
        {{else}}
            <div class="no_loaddata"></div>
        {{/if}}
    </script>
    <script type="text/html" id="tmplErrorData">
        <div class="no_errordata">
            <div class="error_refresh_btn"><img src="$!webPath/resources/app/mcjd/images/ico_7.png" width="26" /><p>出错了，点击刷新</p></div>
        </div>
    </script>
    <script type="text/javascript">
        template.helper("getStatusTxt", function(val, isReturn){
            if('10' == val) {
                str = '等待支付';
            }else if('11' == val) {
                str = '付款确认中';
            }else if('20' == val) {
            	if(isReturn && isReturn == "true"){
                	str = '申请退款中';
            	}else{
                	str = '等待发货';
            	}
            }else if('30' == val) {
            	if(isReturn && isReturn == "true"){
                	str = '申请退款中';
            	}else{
	                str = '已发货';
            	}
            }else if('31' == val) {
                str = '服务站已收货';
            }else if('40' == val) {
            	if(isReturn && isReturn == "true"){
                	str = '申请退款中';
            	}else{
	                str = '交易成功';
            	}
            }else if('45' == val) {
                str = '请将商品退回';
            }else if('46' == val) {
                str = '等待卖家收货';
            }else if('43' == val) {
                str = '退款中';
            }else if('47' == val) {
                str = '退款成功';
            }else if('48' == val) {
                str = '卖家已拒绝';
            }else if('0' == val) {
                str = '交易关闭';
            }else if('50' == val) {
                str = '交易完成';
            }else if('51' == val) {
                str = '先行赔付处理中';
            }else if('52' == val) {
                str = '一家已先行赔付';
            }
            return str;
        });
        template.helper("getArrNum", function(val){
            var n = val.length || 0;
            return n;
        });
    </script>

    <script type="text/javascript" src="$!webPath/resources/app/mcjd/js/touch.min.js"></script>
    <script type="text/javascript" src="$!webPath/resources/app/mcjd/js/imgSetSize.min.js"></script>
    <script type="text/javascript" src="$!webPath/resources/app/mcjd/js/utils.js"></script>
    <script type="text/javascript">
        jQuery(function($) {
        	var _accessToken = "$!accessToken",_orgId="$!orgId";

            // 客服--隐藏
            $('#overlay_tel_bx').on('click', '.overlay_tel_bg', function() {
                $('#overlay_tel_bx').hide();
            }).on('click', '.it-close', function() {
                $('#overlay_tel_bx').hide();
            });

            var pageNo = 1, pageSize = 10, pageFlag = false;
            // 订单列表
            function getOrderList() {
                pageFlag = false;
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    timeout: 15000,
                    url: _URL_.orderList,
                    data: {
                    	accessToken: _accessToken,
                        pageNo: pageNo,
                        pageSize: pageSize
                    },
                    success: function(res) {
                        pageFlag = true;
                        if ("100" === res.code) {
                            res.data.list = res.data.list || [];
                            if(res.data && res.data.list && res.data.list.length < pageSize) {
                                pageFlag = false;
                            }
                            res.data.pageNo = pageNo;
                            res.data.pageSize = pageSize;
                            var html = template('tmplOdList', res.data);
                            $('#resOdList').append(html);

                            var nohtml = template('tmplNoData', res.data);
                            $('#resNoData').html(nohtml);

                            $("img[ig_crop='max']").imgSetSize();
                        } else if ("401" === res.code) { //App端请求，需要登录
                            Utils.showToast("请登录后再操作！");
                        } else if ("405" === res.code) { //微信端请求，需要登录
                            Utils.showToast("请先微信授权后再操作！");
                        } else {
                            pageFlag = false;
                            var errorhtml = template('tmplErrorData', {});
                            $('#resNoData').html(errorhtml);
                            Utils.showToast(res.code + ":" + res.msg || '请求出错');
                        }
                    },
                    error: function(xhr) {
                        pageFlag = false;
                        var errorhtml = template('tmplErrorData', {});
                        $('#resNoData').html(errorhtml);
                        var msg = "请求出错(请检查相关网络状况)";
                        Utils.showToast(msg);
                    }
                });
            };
            getOrderList();
            
            $('#resNoData').on('click', '.error_refresh_btn', function() {
                $('#resNoData').html('<div class="no_loaddata"></div>');
                getOrderList();
            });
            
            //详情页
           	$('#resOdList').on('click', '.orderDetail', function() {
                var orderId = $(this).attr("it_rderId");
                location.href = _URL_.orderDetail +"?accessToken="+_accessToken+"&orgId="+_orgId +"&orderId="+orderId;
            });
            
            function orderDel(_orderId){
            	$.ajax({
                    type: "POST",
                    dataType: "json",
                    timeout: 15000,
                    url: _URL_.orderDelete,
                    data: {
                    	accessToken: _accessToken,
                    	orderId: _orderId
                    },
                    success: function(res) {
                        if ("100" === res.code) {
                            Utils.showToast("删除成功！");
                            $("#order_"+_orderId).remove();
                        } else if ("401" === res.code) { //App端请求，需要登录
                            Utils.showToast("请登录后再操作！");
                        } else if ("405" === res.code) { //微信端请求，需要登录
                            Utils.showToast("请先微信授权后再操作！");
                        } else {
                            Utils.showToast(res.code + ":" + res.msg || '请求出错');
                        }
                    },
                    error: function(xhr) {
                        var msg = "请求出错(请检查相关网络状况)";
                        Utils.showToast(msg);
                    }
                });
            }
            function orderReceived(_orderId){
            	$.ajax({
                    type: "POST",
                    dataType: "json",
                    timeout: 15000,
                    url: _URL_.orderReceived,
                    data: {
                    	accessToken: _accessToken,
                    	orderId: _orderId
                    },
                    success: function(res) {
                        if ("100" === res.code) {
                            Utils.showToast("确认收货成功！");
                            location.reload();
                        } else if ("401" === res.code) { //App端请求，需要登录
                            Utils.showToast("请登录后再操作！");
                        } else if ("405" === res.code) { //微信端请求，需要登录
                            Utils.showToast("请先微信授权后再操作！");
                        } else {
                            Utils.showToast(res.code + ":" + res.msg || '请求出错');
                        }
                    },
                    error: function(xhr) {
                        var msg = "请求出错(请检查相关网络状况)";
                        Utils.showToast(msg);
                    }
                });
            }

            // 底部
            $('#resOdList').on('tap', '.btn_unbox', function() {
                var _li = $(this).parents('li').eq(0);
                var it_rderId = _li.attr('it_rderId');
                var it_rderNo = _li.attr('it_rderNo');
                alert('晒单评价');
            }).on('tap', '.btn_del', function() {
            	var orderId = $(this).parent().attr("it_orderId");
            	orderDel(orderId);
            }).on('tap', '.btn_pay', function() {
                alert('立即支付');
            }).on('tap', '.btn_take', function() {
            	var orderId = $(this).parent().attr("it_orderId");
            	orderReceived(orderId);
            }).on('tap', '.btn_log', function() {
            	var viewExpressUrl = $(this).parent().attr("it_viewExpressUrl");
            	location.href = viewExpressUrl;
            }).on('tap', '.btn_buyer', function() {
            	var phone = $(this).parent().attr("it_phone");
            	$(".it_tel").text(phone);
            	$(".btn-teln").children().eq(0).attr("href", "tel:"+phone);
                $("#overlay_tel_bx").show();
            });
            
            window.onscroll = function() {
                if(pageFlag){
                    //获取当前可视范围的高度
                    var clientHeight = 0;
                    if (document.body.clientHeight && document.documentElement.clientHeight) {
                        clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
                    }else {
                        clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
                    }
                    // 滚动条位置
                    var scrollTop = 0;
                    if (document.documentElement && document.documentElement.scrollTop) {
                        scrollTop = document.documentElement.scrollTop;
                    }
                    else if (document.body) {
                        scrollTop = document.body.scrollTop;
                    }
                    // 获取文档完整的高度
                    var scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
                    // 判断加载
                    if (Math.ceil(scrollTop + clientHeight) >= scrollHeight) {
                        pageFlag = false;
                        pageNo += 1;
                        getOrderList();
                    }
                }
            };
        });
    </script>

</body>
</html>